import directoryJSon from "./mock/directory.json"
import productJson from "./mock/product.json"
import {useCallback, useEffect, useRef, useState} from "react";
import Tabs from "./components/tabs";
import "./index.scss"
import ImgText from "./components/imgText";
import {getFlatArrDataById, getLeafNodes, getTargetSubObj} from "./utils";
import {levelFQAData} from "./config"

const directory = directoryJSon.data
const product = productJson.data.directorySpuList

export default function Mall() {
  const [tabData, setTabData] = useState([])
  const [firstTabIndex, setFirstTabIndex] = useState(0)

  const handTabChange = (tab, i, deep) => {
    if(deep === 0) {
      setFirstTabIndex(i)
    }
    let {sub_list = []} = tab || {}
    let arr = [tab.id]
    if(Array.isArray(sub_list) && sub_list.length > 0) {
      console.log('subList', sub_list[0])
      let targetSub = sub_list[0] || {}
      if(Array.isArray(targetSub.sub_list) && targetSub.sub_list.length > 0) {
        targetSub = targetSub.sub_list[0] || {}
      }
      if(targetSub.sub_layout_direction === 1) {
        // 全部展示
        arr = getLeafNodes(targetSub.sub_list || sub_list).map(d => d.id)
      } else {
        arr = getLeafNodes(sub_list).map(d => d.id)
      }
    }
    console.log('arr', arr)
  }

  useEffect(
    () => {
      const data = (directory || [])
      setTabData(data)

      setTimeout(() => {
        triggerClick()
      }, 500)
    },
    [directory]
  )

  const triggerClick = () => {
    try {
      const dom = document.querySelector('.item-zkk-tab-0-0')
      dom.click()
    } catch (e) {
      console.error(e)
    }
  }

  const productData = getFlatArrDataById(product, 'directory_id', 18)
  const spuList = productData || []

  console.log('productData', productData)
  return (
    <div className="Mall">
      <Tabs data={tabData} onChange={handTabChange} childData={product}>
        {firstTabIndex === 0 && <div>一级目录第一个tab</div>}
      </Tabs>


      <h3 className="FQA-title">
        <span className="icon"/>
        如何升级？
        <span className="icon"/>
      </h3>
      <ul className="FQA-list">
        {
          levelFQAData.map((d, i) => (
            <li key={d.title}>
              <img src={d.img} alt=""/>
              <div>
                <h4>{d.title}</h4>
                <p>{d.desc}</p>
              </div>
            </li>
          ))
        }
      </ul>
    </div>
  )
}
